<template>
    <van-cell class="comment-item">
      <van-image
        slot="icon"
        class="avatar"
        round
        fit="cover"
        :src="commentItemS.aut_photo"
      />
      <div slot="title" class="title-wrap">
        <div class="user-name">{{commentItemS.aut_name}}</div>
        <van-button
          class="like-btn"
          :icon="commentItemS.is_liking ? 'good-job' : 'good-job-o'"
          :class="{
            is_color:commentItemS.is_liking
          }"
          @click="onLike"
          :loading="CommentLoading"
        >{{commentItemS.like_count >0 ? commentItemS.like_count : '赞'}}</van-button>
      </div>
  
      <div slot="label">
        <p class="comment-content">{{commentItemS.content}}</p>
        <div class="bottom-info">
          <span class="comment-pubdate">{{commentItemS.pubdate | dayFn}}</span>
          <van-button
            class="reply-btn"
            round
            @click="$emit('reply_click',commentItemS)"
          >回复 {{commentItemS.reply_count}}</van-button>
        </div>
      </div>
    </van-cell>
  </template>
  
  <script>
  import {addCommentLike,delCommentLike} from '@/api/comment'
  export default {
    name: 'CommentItem',
    components: {},
    props: {
        commentItemS:{
            type:Object,
            required:true
        }
    },
    data () {
      return {
        CommentLoading: false
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
        async onLike(){
            this.CommentLoading = true
            try{
                if(this.commentItemS.is_liking){
                    //已点赞，取消点赞
                    await delCommentLike(this.commentItemS.com_id)
                    this.commentItemS.like_count--
                }else{
                    //未点赞，添加点赞
                    await addCommentLike(this.commentItemS.com_id)
                    this.commentItemS.like_count++
                }
                this.commentItemS.is_liking = !this.commentItemS.is_liking
            }catch(err){
                this.$toast('操作失败，请重试')
            }
            this.CommentLoading = false
        }
    }
  }
  </script>
  
  <style scoped lang="less">
  .comment-item {
    .avatar {
      width: 72px;
      height: 72px;
      margin-right: 25px;
    }
    .title-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-name {
        color: #406599;
        font-size: 26px;
      }
    }
    .comment-content {
      font-size: 32px;
      color: #222222;
      word-break: break-all;
      text-align: justify;
    }
    .comment-pubdate {
      font-size: 19px;
      color: #222;
      margin-right: 25px;
    }
    .bottom-info {
      display: flex;
      align-items: center;
    }
    .reply-btn {
      // width: 135px;
      height: 48px;
      line-height: 48px;
      font-size: 21px;
      color: #222;
    }
    .like-btn {
      height: 30px;
      padding: 0;
      border: none;
      font-size: 19px;
      line-height: 30px;
      margin-right: 7px;
      .van-icon {
        font-size: 30px;
      }
      &.is_color{
        color: red;
      }
    }
  }
  </style>
  